<template>
	<div class="story-video-wrap" @click="handlePlay">
		<img :src="storyData.imgUrl">
		<div class="play" ></div>
		<div class="time">{{parseDuration}}</div>
	</div> 
</template>
<script>
	export default {
		name: 'y-story-video',
		props: {
			storyData: {},
		},
		async created() {
			// console.log('storyData', this.storyData);
		},
		
		methods: {
			handlePlay() {
				this.$emit('handlePlay');
			},
			padZero(num) {
				const string = num.toString();
				return string.length > 1 ? string : `0${string}`;
			},
		},
		computed: {
			parseDuration() {
				let time = this.storyData.duration;
				let hour = Math.floor(time / 60);
				let minute = time % 60;
				return `${this.padZero(hour)}:${this.padZero(minute)}`;
			}
		}
	}
</script>
<style scoped>
	.story-video-wrap {
		background: #edeff0;
		width: 100%;
		height: auto;
		position: relative;
		& img {
			display: block;
			width: auto;
			height: 5rem;
			margin: 0 auto;
		}

		& .play {
			width: 1rem;
			height: 1rem;
			background: url('../assets/play-n.png') no-repeat center;
			background-size: contain;
			position: absolute;
			top: 45%;
			left: 50%;
			margin-left: -0.5rem;
			z-index: 2;
		}

		& .time {
			background: #767778;
			color: #fff;
			font-size: 0.24rem;
			border-radius: 0.22rem;
			padding: 0.1rem 0.12rem;
			line-height: 1;
			position: absolute;
			bottom: 0.3rem;
			right: 0.3rem;
		}
	}
</style>